$fontSizeTitle:16px;
$fontSizeSecondTitle:15px;
$backgroundColor:#03005B;
$margin-content:5vw;

@media screen and (max-width: 1300px) {
    main {
        margin: 0 2vw !important;
    }
}

@media screen and (max-width: 1200px) {
    main {
        margin: 0 10px !important;
    }
}

@media screen and (max-width: 900px) {
    main {
        margin: 0 5vw !important;
    }
}

.lay-out-des {
    // background-color: $backgroundColor !important;
    background-image: url(../../../assets/image/bg-image.png);
    background-size: 100% 100%;
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 14px;

    .subtitle {
        height: 60px;
        background-image: url(../../../assets/image/subtitle.png);
        background-position: center center;


        &-item {
            font-size: 18px;
            font-family: PingFang SC;
            font-weight: 400;
            line-height: 33px;
            color: white;
            text-shadow: 0px 0px 16px #1EC9FF;
            opacity: 1;
            margin-left: 42.5%;
            line-height: 80px;
        }
    }

    // 头部样式开始
    Header {
        // height: 200px;
        padding: 0 5vw;
        // background-color: rgb(125, 187, 241) !important;
        border-bottom: #dfb1b1 1px solid;
        overflow: hidden;
        // background-color: $backgroundColor;

        .header-row {
            margin-top: 5px;
            height: 60px;
            width: 100%;

            &-subtitle {
                display: flex;
                margin-left: 10px;
                // margin-top: 15px;
                // justify-content: space-around;
            }

            .subtitle-item {
                font-family: PingFang SC;
                font-size: $fontSizeTitle;
                margin: 5px;
                margin-bottom: 0;
                border: 1px solid #35CFFF;
                opacity: 1;
                text-align: center;
                transform: skewX(-35deg);

                >div {
                    width: 114px;
                    color: white;
                    height: 29px;
                    line-height: 29px;
                    transform: skewX(35deg);
                }
            }

            // background-color: rgb(255, 210, 210);
            div:nth-of-type(1) {
                // background-color: rgb(186, 209, 253);
            }

            div:nth-of-type(3) {
                // background-color: rgb(223, 250, 180);

                >span {
                    line-height: 20px;
                    color: #66BFDE;
                    // background-color: red;

                    &::before {
                        position: relative;
                        content: "";
                        display: inline-block;
                        width: 20px;
                        height: 20px;
                        background: url(../../../assets/image/warn.png) no-repeat;
                        background-size: 100%;
                        margin-bottom: -3px;
                        right: 15px;

                    }
                }
            }
        }

    }

    //头部样式结束

    //内容样式开始
    .lay-content {
        main {
            margin: 0 $margin-content;
        }

        .upper-half {
            // 静态页面报警样式
            // >div:nth-of-type(3) {
            //     >div>div:nth-child(1)>div {
            //         >div>div {
            //             .infact-data>div>div {
            //                 >span:nth-of-type(2) {
            //                     // margin-left: 10%;
            //                     color: #FF0000;
            //                 }

            //                 border: 1px solid #c40202;
            //                 background: linear-gradient(180deg, #c40202 0%, rgba(109, 74, 74, 0) 35%, rgba(255, 0, 0, 0.26) 72%, #c40202 100%);
            //             }
            //         }

            //         .thrre-plate-top {
            //             sub {
            //                 color: red;

            //                 &::before {
            //                     content: '';
            //                     position: absolute;
            //                     width: 9px;
            //                     height: 9px;
            //                     background: red !important;
            //                     border-radius: 50%;
            //                     left: -15px;
            //                     top: -4px;
            //                 }
            //             }

            //             >div span:nth-of-type(1) {
            //                 color: red;
            //             }

            //             background-image: url(../.../../../../assets/image/warn-title.png);
            //         }

            //         .first-border {
            //             background-image: url(../../../assets/image/warn-bg.png) !important;
            //         }


            //     }
            // }
            // 预留报警样式开始
            .warn {
                .infact-data>div>div {
                    >span:nth-of-type(2) {
                        // margin-left: 10%;
                        color: #FF0000;
                    }

                    border: 1px solid #c40202;
                    background: linear-gradient(180deg, #c40202 0%, rgba(109, 74, 74, 0) 35%, rgba(255, 0, 0, 0.26) 72%, #c40202 100%);
                }

                // 预留报警样式结束
                .thrre-plate-top {
                    sub {
                        color: red !important;

                        &::before {
                            content: '';
                            position: absolute;
                            width: 9px;
                            height: 9px;
                            background: red !important;
                            border-radius: 50%;
                            left: -15px;
                            top: -4px;
                        }
                    }

                    >div span:nth-of-type(1) {
                        color: red;
                    }

                    background-image: url(../.../../../../assets/image/warn-title.png) !important;
                }

                .first-border {
                    background-image: url(../../../assets/image/warn-bg.png) !important;
                }
            }



            .content-title {
                // height: 20px;
                margin-top: 10px !important;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                text-align: left;

                span {
                    color: rgb(247, 170, 28);
                    margin-left: 2%;
                    font-size: 16px;

                    &::before {
                        position: absolute;
                        content: '';
                        margin: 7px 0 0 -8px;
                        height: 14px;
                        width: 3px;
                        background-color: rgb(247, 170, 28);
                    }
                }
            }


            .face-plate {
                .first-border {
                    background-image: url(../.../../../../assets/image/content-bg.png);
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                }

                >div>div>div>div {
                    // background:
                    //     linear-gradient(130deg, transparent 8px, rgba(70, 127, 224, 0.16) 0) top left,
                    //     linear-gradient(-130deg, transparent 8px, rgba(70, 127, 224, 0.16) 0) top right;
                    // background-size: 50% 100%;
                    // background-repeat: no-repeat;
                }

                .thrre-plate-top {
                    overflow: hidden;
                    height: 46px;
                    width: 100%;
                    background-image: url(../../../assets/image/title-bg.png);
                    // background: linear-gradient(130deg, transparent 8px, rgba(70, 127, 224, 0.39) 0) top left,
                    //     linear-gradient(-130deg, transparent 8px, rgba(70, 127, 224, 0.39) 0) top right;
                    background-size: 100% 100%;
                    background-repeat: no-repeat;

                    >div {
                        height: 46px;
                        color: white;
                        font-size: $fontSizeSecondTitle;
                        margin-left: 10px;
                        line-height: 46px;
                        text-align: left;

                        >img {
                            margin-right: 10px;
                        }

                        >span:nth-of-type(2) {
                            // margin-left: 10px;
                        }

                        sub {
                            float: right;
                            font-size: $fontSizeSecondTitle;
                            bottom: -22px;
                            right: 15px;
                            color: #56E185;

                            &::before {
                                content: '';
                                position: absolute;
                                width: 9px;
                                height: 9px;
                                background: #56E185;
                                border-radius: 50%;
                                left: -15px;
                                top: -4px;
                            }
                        }
                    }

                    +div>div {
                        margin: 0 3%;
                    }

                    &+div>div>div>div {
                        border-bottom: 1px dashed rgba(193, 195, 200, 0.2);

                        >div>div>div {
                            color: white;
                            height: 35px;
                            text-align: left;
                            line-height: 35px;
                            overflow: hidden;

                            sub {
                                float: right;
                                font-size: 14px;
                                bottom: -17px;
                            }

                            >span:nth-of-type(1) {

                                margin-left: 5px;

                                >sub {
                                    margin-right: 25%;
                                }
                            }

                            >span:nth-of-type(2) {
                                margin-left: 15%;
                            }

                            >span:nth-of-type(3) {
                                float: right;
                                margin-right: 5px;
                            }

                            // border-bottom:1px dashed coral;
                        }
                    }
                }

                >div>div {
                    margin-top: 10px;
                }
            }

            .space {
                height: 10px;
                width: 100%;

                &-two {
                    height: 15px;
                    width: 100%;
                }
            }

            .infact-data {
                margin-right: 2% !important;
                margin-left: 2% !important;

                div:nth-child(2)>div {
                    >span:nth-of-type(2) {
                        color: #F8A399;
                    }
                }

                >div {
                    >div {
                        // overflow: hidden;

                        >span:nth-of-type(1) {
                            margin-left: 5%;
                            margin-right: 5%;
                            font-size: 14px;
                            line-height: 20px;
                        }

                        >span:nth-of-type(2) {
                            margin-left: 10%;
                            height: 18px;
                            font-size: 13px;
                            color: #90FBB1;
                        }

                        >span:nth-of-type(3) {
                            float: right;
                            margin-right: 5%;
                        }
                    }

                    >div {
                        color: white;
                        margin-top: 20px;
                        margin-bottom: 25px;
                        // margin: 20px 10% 25px 19%;
                        background-color: azure;
                        line-height: 42px;
                        height: 42px;
                        border: 1px solid #193667;
                        background: linear-gradient(180deg, #4484FD 0%, rgba(70, 149, 251, 0) 35%, rgba(64, 142, 251, 0.26) 72%, #4585FE 100%);
                        position: relative;

                        &:hover .suspend-container {
                            z-index: 99;
                        }

                        .suspend-container {
                            position: absolute;
                            width: 100%;
                            // height: 200px;
                            padding-bottom: 10px;
                            background: rgba(255, 247, 138, 0.9);
                            border: 1px solid rgba(175, 194, 119, 1);
                            border-radius: 5px;
                            z-index: -1;
                            top: 30px;
                            left: 21px;
                            color: #5F4B0D;

                            &-title {
                                height: 30px;
                                width: 100%;
                                background: rgba(255, 247, 138, 0.84);
                                border: 1px solid rgba(175, 194, 119, 0.4196078431372549);
                                box-shadow: 0px 3px 6px rgba(48, 46, 20, 0.3);
                                font-weight: bold;
                                line-height: 30px;


                                >span {
                                    margin-left: 5px;
                                }

                                >span:nth-of-type(2) {
                                    float: right;
                                    margin-right: 10px;
                                }
                            }

                            &-content {
                                font-size: 12px;
                                opacity: 0.7;

                                ul {
                                    padding-right: 20px;
                                    margin-left: 5px;
                                    color: #5F4B0D !important;

                                    :last-child {
                                        >span:nth-of-type(2) {
                                            margin-left: -10%;
                                        }
                                    }

                                }

                                li {
                                    margin-left: -35px;
                                    height: 20px;
                                    list-style-type: none;

                                    >span:nth-of-type(1) {
                                        text-align: justify;
                                        margin-right: 10%;
                                        overflow: hidden;
                                        white-space: nowrap;
                                        text-overflow: ellipsis;
                                    }

                                    >span:nth-of-type(2) {
                                        text-align: center;
                                        overflow: hidden;
                                        white-space: nowrap;
                                        text-overflow: ellipsis;

                                    }

                                    sub {
                                        // float: right;
                                        font-size: 12px;
                                        top: -1px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        .bottom-half {

            .thrre-plate {
                margin-top: 10px;
                font-size: 13px;
                color: #fff;
                text-align: center;

                .three-plant-firstrow {
                    background: linear-gradient(180deg, rgba(70, 127, 224, 0.72) 0%, rgba(70, 127, 224, 0.39) 50%, rgba(70, 127, 224, 0.69) 100%);
                }

                .three-plant-first>div {
                    background-image: url(../../../assets/image/poisonous-bg1.png);
                    background-size: 60%;
                    background-repeat: no-repeat;
                    background-position: 50% 50%;
                    height: 150px;
                }

                .three-plant-second>div {
                    &:nth-child(1) {
                        // background-color: red;

                        ::after {
                            content: '';
                            position: absolute;
                            right: -10px;
                            height: 36px;
                            top: 30px;
                            width: 1px;
                            background-color: rgba(34, 205, 238, 0.16);
                        }
                    }

                    &:nth-child(2)::before {
                        content: '';
                        position: absolute;
                        right: 15px;
                        height: 36px;
                        top: 30px;
                        width: 1px;
                        background-color: rgba(34, 205, 238, 0.16);

                    }

                    >div {

                        // background-color: rgb(238, 221, 219);
                        margin-bottom: 10px;

                        :first-child {
                            opacity: 0.8;
                            padding-top: 20px;
                        }

                        :last-child {
                            display: inline-block;
                            padding-top: 20px;
                            font-size: 19px;
                            color: #56E185;
                        }
                    }
                }

                >div>div {
                    border: 1px solid #467FE0;
                    // height: 150px;
                }

                .litle-plant {

                    background: rgba(70, 127, 224, 0.16);


                    div:nth-child(1) {
                        height: 95px;
                        opacity: 0.8;
                        background-image: url(../../../assets/image/poisonous-bg2.png);
                        background-repeat: no-repeat;
                        background-position: 90% 60%;

                        +div {
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                            word-break: break-all;
                            padding-bottom: 16px;
                            text-align: left;
                            margin-left: 5%;
                        }

                        span {
                            font-size: 19px;
                            line-height: 26px;
                            color: #56E185;
                            display: inline-block;
                            margin-right: 70%;
                        }

                        p {
                            padding-top: 25px;
                            text-align: left;
                            margin-left: 5%;
                        }

                        sub {
                            font-size: 13px;
                            float: right;
                            left: -50%;
                            top: 7px;
                        }
                    }
                }
            }

            .four-plate {
                margin-bottom: 70px;
                color: #FFFFFF;
                font-size: 13px;

                &-title {
                    overflow: hidden;
                    height: 45px;
                    border: 1px solid #467FE0;
                    background: linear-gradient(180deg, rgba(70, 127, 224, 0.72) 0%, rgba(70, 127, 224, 0.39) 50%, rgba(70, 127, 224, 0.69) 100%);
                    font-size: 15px;
                    line-height: 42px;

                    >span {
                        margin-left: 3%;

                        >img {
                            margin-right: 2%;
                        }
                    }

                    sub {
                        float: right;
                        font-size: 16px;
                        top: 20px;
                        right: 5%;
                        color: #56E185;

                        &::before {
                            content: '';
                            position: absolute;
                            width: 9px;
                            height: 9px;
                            background: #56E185;
                            border-radius: 50%;
                            left: -15px;
                            top: -4px;
                            ;
                        }
                    }
                }

                &-content {
                    overflow: hidden;

                    .content-up {
                        width: 100%;
                        margin-left: 4%;
                        font-size: 13px;
                        margin-top: 36px;

                        span:not(span:nth-of-type(1)) {
                            margin-right: 3%;

                            sub {
                                position: relative;
                                font-size: 13px;
                                top: 0px;
                                left: 2%;
                            }
                        }

                        span:nth-of-type(2) ::after {
                            right: -10%;
                            position: absolute;
                            content: '';
                            color: white;
                            bottom: 3px;
                            width: 2px;
                            height: 10px;
                            background-color: #467FE0;
                            opacity: 0.43;
                        }

                        span:nth-of-type(3) ::after {
                            right: -10%;
                            position: absolute;
                            content: '';
                            color: white;
                            bottom: 3px;
                            width: 2px;
                            height: 10px;
                            background-color: #467FE0;
                            opacity: 0.43;
                        }

                        span:nth-of-type(2) {
                            sub {
                                color: #EE3E3E;
                            }
                        }

                    }

                    .content-down {
                        margin-top: 48px;

                        >div>div>div:nth-of-type(1) sub::after {
                            position: absolute;
                            content: '';
                            color: white;
                            bottom: 0px;
                            width: 2px;
                            height: 15px;
                            right: -50%;
                            background-color: #467FE0;
                            opacity: 0.43;
                        }

                        >div>div>div:nth-of-type(2) sub::after {
                            position: absolute;
                            content: '';
                            color: white;
                            bottom: 0px;
                            width: 2px;
                            height: 15px;
                            right: -50%;
                            background-color: #467FE0;
                            opacity: 0.43;
                        }

                        >div:nth-of-type(1) span {
                            margin-left: 12% !important;

                        }

                        >div:nth-of-type(2) {
                            padding-bottom: 30px;
                        }

                        .mt {
                            margin-top: 20px;
                        }

                        &-text {
                            // background-color: gainsboro;
                            margin-right: 8% !important;

                            >div>div {
                                >span {
                                    // margin-right: 8%;
                                    float: right;

                                    >sub {
                                        font-size: 13px;
                                        // float: right;
                                        bottom: 1px;
                                    }
                                }
                            }
                        }
                    }
                }

                &-content {
                    // height: 191px;
                    background: rgba(70, 127, 224, 0.16);
                    border: 1px solid #467FE0;
                }

                >div>div {
                    margin-top: 10px;
                    height: 240px;

                }
            }
        }
    }

    //内容样式结束    
}